<%-- 
    Document   : consultarEstadisticas
    Created on : Feb 4, 2011, 12:39:46 AM
    Author     : dymanik
--%>
<style type="text/css">
    .tree-item{ width: 40%; float: left; clear: none; margin: 0 15px;}
    #novedadesWidget { width: 80%; margin: auto;}
    .nGen{margin: 0 20px; border-top: #369 solid 2px;}
    .nEsp{padding-left: 20px; border-bottom: #ccc dashed 1px;background: #ecf2f6;}
    .ng-tittle, .ne-tittle{padding-left: 5px; text-align: left;}
    .ng-tittle {background: #cad0c4; font-weight: bolder; min-height: 25px;}
    .ne-tittle{font-weight: bold;}
    .ng-total, ne-total{font-weight: normal;clear: none; padding-left: 10px;}
    .datosNov{padding-left: 20px; color: #000;font-weight: normal; width: 100%}
</style>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file='../Templates/security.jsp' %>
<%@ include file="FuncionesUtilitarias.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<h1 class="title">Estadísticas</h1>
<hr>
<p class="meta"></p>
<div class="entry">
    <center>
        <form action="javascript:voide(0);"  id="estadisticasForm" onsubmit="return consultarEstadisticas();">
            <br>
            <table cellspacing="10px">
                <tr><td>Desde: </td>
                    <td><input id="from" name="desde" size="20"/></td>
                    <td>Hasta: </td>
                    <td> <input id="to" name="hasta" size="20"/></td>
                </tr>
            </table>
            <table>
                <tr><td>Sede:</td>
                    <td><select id="Sedes" name ="sede" onchange="listEspacios(value,null); listaGrupos(value);"></select></td>
                </tr>
                <tr><td>Espacio:</td>
                    <td><select id="Espacios" name ="espacio"></select></td>
                </tr>
                <tr><td>Grupo que atiende el suceso:</td>
                    <td><select id="Grupos" name ="grupo"></select></td>
                </tr>
                <tr><td>Oficial que atiende el suceso:</td>
                    <td><select id="trabajadorDSI" name ="personalDsi"></select></td>
                </tr>
            </table>
            <br>
            <center><br><img alt="Cargando" src="style/images/cargando.gif" class="consultaCargandoImg"/><br></center>
            <div id="novedadesWidget" class="oculta">
                <div id="novedadesTree" class="tree"></div>
                <center><br><img alt="Cargando" src="style/images/cargando.gif" class="consultaCargandoImg"/><br></center>
            </div>
            <br>
            <div style="clear:both">
                <input type='submit' value='Consultar'/>
                <html:reset property="" value='Limpiar'/>
            </div>
            <br>
            <%-- AQUI COMIENZA LA IMPRESION DE LA TABLA DE RESULTADOS --%>
            <div id="consultarEstadistica">
                <table id="tableResult" class="sortable oculta">
                    <thead id="head">
                        <tr>
                            <th width="5%"><h5>Novedad</h5></th>
                            <th width="20%"><h5>Fecha</h5></th>
                            <th width="20%"><h5>Hora</h5></th>
                            <th width="45%"><h5>Oficial</h5></th>
                            <th width="10%"><h5>Detalles</h5></th>
                            <th width="0%" class="detalles oculta"><h5></h5></th>
                        </tr>
                    </thead>
                </table>
                <div id="resultado"></div>
                <div id="detalleReporte"></div>
            </div>
            <div style="clear: both;">&nbsp;</div>
        </form>
    </center>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">
    $(function(){
        listaSedes();
        listaGrupos();

        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "-3m",
            changeMonth: true,
            maxDate: new Date(),
            dateFormat: 'dd/mm/yy',
            showOn: "button",
            buttonImage: "style/images/calendar.gif",
            buttonText: "calendario",
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        }).attr('readonly', true);
        $('#detalleReporte').dialog({
            autoOpen: false,
            title: 'Detalles del Reporte',
            hide: "explode"
        });
        $('.consultaCargando').css('display','none');
        $('.consultaCargandoImg').css('display','block');
    });
</script>


